<template>
    <rx-fit style="padding-top:5px;">
      <template #middle>
        <a-button @click="addVar" size="small" type="primary"><PlusOutlined />{{i18n('processVarList.addVarBtn','添加变量')}}</a-button>
        <a-table :bordered="true" :columns="varColumns"
                 :dataSource="vars" :defaultExpandAllRows="true"
                 :pagination="false"
                 :rowKey="record => record.key" style="padding-top:5px;">
          <template #bodyCell="{ column, record,index }">
            <template v-if="column.key === 'key'">
              <a-input :value="record['key']" @blur="e => onChangeVar(e,record,index,'key')"/>
            </template>
            <template v-else-if="column.key === 'type'">
              <a-select :value="record['type']" @change="e => onSelectVar(e,record,index,'type')"
                        style="width:100%">
                <a-select-option value="java.lang.String">{{i18n('processVarList.string','字符串')}}</a-select-option>
                <a-select-option value="java.util.Date">{{i18n('processVarList.date','日期')}}</a-select-option>
                <a-select-option value="java.util.Double">{{i18n('processVarList.double','数字')}}</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'val'">
              <a-input :value="record['val']" @blur="e => onChangeVar(e,record,index,'val')" />
            </template>
            <template v-else-if="column.key === 'action'">
              <DeleteOutlined @click="delVarRow(record,index)" style="cursor: pointer;color: #ff4d4f;" :title="$ti18('rxList.delBtn','删除')" />
              <SaveOutlined @click="saveVarRow(record,index)" style="cursor: pointer" :title="$ti18('rxForm.saveBtn','保存')" />
            </template>
          </template>
        </a-table>
      </template>
    </rx-fit>

</template>

<script>
    import BpmInstApi from '@/common/api/bpm/bpmInst';
    export default {
        name: "BpmInstVars",
        props:{
            actInstId:{type:String}
        },
        data(){
            return {
                vars:[],
                varColumns:[
                    {
                        title: this.i18n('processVarList.key','标识Key'),
                        dataIndex: 'key',
                        key: 'key',
                        width:120,
                        scopedSlots: {customRender: 'key'}
                    }, {
                        title: this.i18n('processVarList.type','类型'),
                        dataIndex: 'type',
                        key: 'type',
                        width:130,
                        scopedSlots: {customRender: 'type'}
                    },
                    {
                        title: this.i18n('processVarList.value','值'),
                        dataIndex: 'val',
                        key: 'val',
                        width:150,
                        scopedSlots: {customRender: 'val'}
                    },{
                        title: this.$ti18('rxList.action','操作'),
                        width:80,
                        scopedSlots: {customRender: 'action'}
                    }
                ]
            }
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"bpmInst",key);
            },
            init(){
                if(this.actInstId){
                    BpmInstApi.listVars(this.actInstId).then(vars=>{
                        this.vars=vars;
                    });
                }
            },
            addVar(){
                this.vars.push({key:'',type:'java.lang.String',val:''});
            },
            delVarRow(record,index){
                let self=this;
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips','操作提示'),
                    content: this.i18n('processVarList.delInfo','您确定需要删除选中的变量吗？'),
                    okText:this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                    zIndex:30000,
                    onOk() {
                        if (record['key'] == '') {
                            self.vars.splice(index, 1);
                        } else {
                            BpmInstApi.delVar(self.actInstId, record['key']).then(resp => {
                                self.vars.splice(index, 1);
                            });
                        }
                    }});
            },
            onChangeVar(e, record, index, col) {
                let val = e.target.value;
                record[col] = val;
            },
            onSelectVar(val, record, index, col) {
                record[col] = val;
            },
            saveVarRow(record){
                BpmInstApi.saveVarRow(this.actInstId,JSON.stringify(record));
            }
        },
        watch:{
            actInstId:function (val,oldVal) {
               this.init();
            }
        }
    }
</script>

<style scoped>

</style>